<template>
  <div class="my-slot">
    <slot name="header"></slot>
    <h3>Slot-Attrs</h3>
    <h1 @click="incr">vuex-store-count: {{ $store.state.count }}</h1>
  </div>
</template>

<script setup lang="ts">
import { useSlots, onMounted, useAttrs, ref } from 'vue'
import { useStore } from 'vuex'

const slots = useSlots()
const attrs = useAttrs()
const $store = useStore()
const incr = function () {
  $store.commit('increment')
}
onMounted(() => {
  // console.log(slots.header && slots.header())

  // 不包含props声明的属性
  console.log(attrs)
})

const info = ref<string>('i am child')
const num = ref<number>(10)

defineExpose({
  info,
  num
})

defineProps({
  msg: String
})
</script>

<style lang="less" scoped>

</style>